{% extends "base.html" %}
{% block title %}新增用例{% endblock %}
{% load staticfiles %}

{% block content %}


    <div class="admin-biaogelist" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">

        <div class="listbiaoti am-cf">
            <ul class="am-icon-flag on"> 用例编辑</ul>
            <dl class="am-icon-home" style="float: right;">当前位置： 用例管理 > <a href="#">新增用例</a></dl>
        </div>

        <div class="am-tabs am-margin">
            <ul class="am-tabs-nav am-nav am-nav-tabs" id="tab-test">
                <li><a href="javascript:;" data-target="#tab1">messages</a></li>
                <li><a href="javascript:;" data-target="#tab2">variables</a></li>
                <li><a href="javascript:;" data-target="#tab3">request</a></li>
                <li><a href="javascript:;" data-target="#tab4">extract/validate</a></li>
            </ul>

            <div class="am-tabs-bd">
                <div class="am-tab-panel" id="tab1">
                    <form class="form-horizontal" id="form_message">
                        <div class="form-group has-feedback has-info">
                            <label for="case_name" class="col-md-2 control-label text-info" style="font-size: 14px;">case_name:</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" id="case_name" placeholder="用例名称"
                                       name="case_name"
                                       value="">
                                <span class="glyphicon glyphicon-certificate form-control-feedback"
                                      aria-hidden="true"></span>
                            </div>
                        </div>

                        <div class="form-group has-success">
                            <label for="project" class="col-md-2 control-label text-info" style="font-size: 14px;">project:</label>
                            <div class="col-md-4">
                                <select name="project" class="form-control" onchange=info_ajax("#form_message")>
                                    <option value=请选择>请选择</option>
                                    {% for foo in project %}
                                        <option value="{{ foo.pro_name }}">{{ foo.pro_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="form-group has-success">
                            <label for="module" class="col-md-2 control-label text-info" style="font-size: 14px;">module:</label>
                            <div class="col-md-4">
                                <select id="belong_module_id" name="module" class="form-control">
                                </select>
                            </div>
                        </div>


                        <div class="form-group has-feedback has-info">
                            <label for="include" class="col-md-2 control-label text-info"
                                   style="font-size: 14px;">include:</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" id="dev_name"
                                       placeholder="config>case_name1>casename2"
                                       name="include"
                                       value="">
                                <span class="glyphicon glyphicon-user form-control-feedback" aria-hidden="true"></span>
                            </div>
                        </div>

                        <div class="form-group has-feedback has-info">
                            <label for="author" class="col-md-2 control-label text-info"
                                   style="font-size: 14px;">author:</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" id="dev_name" placeholder="创建者" name="author"
                                       value="">
                                <span class="glyphicon glyphicon-user form-control-feedback" aria-hidden="true"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="am-tab-panel" id="tab2">
                    <button class="btn btn-info" value="添 加" onclick="addNewRow('variables')">add variables</button>
                    <button class="btn btn-danger" value="删 除" onclick="removeRow('variables')">del variables</button>
                    <button class="btn btn-info" value="添 加" onclick="addNewRow('setup')">add setup</button>
                    <button class="btn btn-danger" value="删 除" onclick="removeRow('setup')">del setup</button>
                    <button class="btn btn-info" value="添 加" onclick="addNewRow('teardown')">add teardown</button>
                    <button class="btn btn-danger" value="删 除" onclick="removeRow('teardown')">del teardown</button>
                    <form id="form_variables">
                        <table class="table table-hover table-condensed table-bordered table-striped" id="variables">
                            <caption>Variables:</caption>
                            <thead>
                            <tr class="active text-success">
                                <th width="5%" align="center">Option</th>
                                <th width="40%" align="center">Key</th>
                                <th width="55%" align="center">Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </form>

                    <form id="form_setup">
                        <table class="table table-hover table-condensed table-bordered table-striped" id="setup">
                            <caption>setUp:</caption>
                            <thead>
                            <tr class="active text-success">
                                <th width="5%" align="center">Option</th>
                                <th width="40%" align="center">Key</th>
                                <th width="55%" align="center">Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </form>

                    <form id="form_teardown">
                        <table class="table table-hover table-condensed table-bordered table-striped" id="teardown">
                            <caption>tearDown:</caption>
                            <thead>
                            <tr class="active text-success">
                                <th width="5%" align="center">Option</th>
                                <th width="40%" align="center">Key</th>
                                <th width="55%" align="center">Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="am-tab-panel" id="tab3">
                    <div class="form-inline">
                        <div class="form-group has-success">
                            <label for="url" style="font-size: 14px;">Api Url:</label>
                            <input type="text" class="form-control am-input-sm " placeholder="api url"
                                   name="url"
                                   id="url">
                        </div>

                        <div class="form-group has-warning">
                            <label for="method"
                                   style="font-size: 14px;"><code>&nbsp;</code>Method:</label>
                            <select class="form-control" name="method" id="method">
                                <option>POST</option>
                                <option>GET</option>
                                <option>PUT</option>
                                <option>DELETE</option>
                            </select>
                        </div>
                        <div class="form-group has-warning ">
                            <label for="DataType"
                                   style="font-size: 14px;"><code>&nbsp;</code>DataType:</label>
                            <select class="form-control" name="DataType" id="DataType">
                                <option>data</option>
                                <option>json</option>
                                <option>params</option>
                            </select>
                        </div>

                        <button class="btn btn-info" value="添 加" onclick="addNewRow('data')">add data</button>
                        <button class="btn btn-danger" value="删 除" onclick="removeRow('data')">del data</button>
                        <button class="btn btn-info" value="添 加" onclick="addNewRow('header')">add headers</button>
                        <button class="btn btn-danger" value="删 除" onclick="removeRow('header')">del headers</button>
                        <form id="form_request_data">
                            <table class="table table-hover table-condensed table-bordered table-striped" id="data">
                                <caption>request:</caption>
                                <thead>
                                <tr class="active text-success">
                                    <th width="5%" align="center">Option</th>
                                    <th width="40%" align="center">Key</th>
                                    <th width="55%" align="center">Value</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </form>

                        <form id="form_request_headers">
                            <table class="table table-hover table-condensed table-bordered table-striped" id="header">
                                <caption>headers:</caption>
                                <thead>
                                <tr class="active text-success">
                                    <th width="5%" align="center">Option</th>
                                    <th width="40%" align="center">Key</th>
                                    <th width="55%" align="center">Value</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>
                <div class="am-tab-panel" id="tab4">
                    <button class="btn btn-info" value="添 加" onclick="addNewRow('extract')">add extract</button>
                    <button class="btn btn-danger" value="删 除" onclick="removeRow('extract')">del extract</button>
                    <button class="btn btn-info" value="添 加" onclick="addNewRow('validate')">add validate</button>
                    <button class="btn btn-danger" value="删 除" onclick="removeRow('validate')">del validate</button>
                    <form id="form_extract">
                        <table class="table table-hover table-condensed table-bordered table-striped" id="extract">
                            <caption>extract:</caption>
                            <thead>
                            <tr class="active text-success">
                                <th width="5%" align="center">Option</th>
                                <th width="40%" align="center">Key</th>
                                <th width="55%" align="center">Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </form>

                    <form id="form_validate">
                        <table class="table table-hover table-condensed table-bordered table-striped" id="validate">
                            <caption>validate:</caption>
                            <thead>
                            <tr class="active text-success">
                                <th width="2%" align="center">Option</th>
                                <th width="38%" align="center">Check</th>
                                <th width="10%" align="center">Comparator</th>
                                <th width="50%" align="center">Expected</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>

        </div>

        <div class="am-form-group am-cf">
            <div class="you" style="margin-left: 11%;">
                <button type="button" class="am-btn am-btn-success am-radius" onclick="case_ajax()">点 击 提 交
                </button>&nbsp;
                &raquo; &nbsp;
                <a type="submit" href="/api/add_config/" class="am-btn am-btn-secondary am-radius">新 增 配 置</a>

            </div>
        </div>
        <table class="table table-hover table-condensed table-bordered table-striped" id="variables">
            <div class="foods">
                <ul>版权所有@2017 .微汇金融 <a href="http://ci.weihui.com/" target="_blank" title="微汇金融">微汇金融</a></ul>
                <dl><a href="" title="返回头部" class="am-icon-btn am-icon-arrow-up"></a></dl>
            </div>

        </table>
    </div>
    <script>
        index = 1;
        function addNewRow(id) {
            var tabObj = document.getElementById(id);//获取添加数据的表格
            var rowsNum = tabObj.rows.length;  //获取当前行数
            var attribute = id;
            var style = 'width:100%; border: none';
            var cellHtml1 = "<input type='text' name='cell1_key" + id + index + "'  value='' style='" + style + "' />";
            var cellHtml2 = "<input type='text' name='cell2_value" + id + index + "' value='' style='" + style + "' />";
            var cellHtml3 = "<input type='text' name='cell3_value" + id + index + "' value='' style='" + style + "' />";
            var myNewRow = tabObj.insertRow(rowsNum);
            var newTdObj0 = myNewRow.insertCell(0);
            var newTdObj1 = myNewRow.insertCell(1);
            var newTdObj2 = myNewRow.insertCell(2);
            newTdObj0.innerHTML = "<input type='checkbox' name='" + attribute + "' id='chkArr_" + index + "' style='width:55px' />";
            newTdObj1.innerHTML = cellHtml1;
            if (id !== 'validate') {
                newTdObj2.innerHTML = cellHtml2;
            } else {
                newTdObj2.innerHTML = "<select name='cell_2comparator" + id + index + "' class='form-control' style='height: 25px; font-size: 15px; " +
                    "padding-top: 0px; padding-left: 0px; border: none'> " +
                    "<option>equals</option> <option>contains</option> <option>startswith</option> <option>endswith</option> <option>regex_match</option> <option>type_match</option> <option>contained_by</option> <option>less_than</option> <option>less_than_or_equals</option> <option>greater_than</option> <option>greater_than_or_equals</option> <option>not_equals</option> <option>string_equals</option> <option>length_equals</option> <option>length_greater_than</option> <option>length_greater_than_or_equals</option> <option>length_less_than</option> <option>length_less_than_or_equals</option></select>";
                var newTdObj3 = myNewRow.insertCell(3);
                newTdObj3.innerHTML = cellHtml3;
            }
            index++;

        }

        /*表格删除行*/
        function removeRow(id) {
            var attribute = id;
            var chkObj = document.getElementsByName(attribute);
            var tabObj = document.getElementById(id);
            for (var k = 0; k < chkObj.length; k++) {
                if (chkObj[k].checked) {
                    tabObj.deleteRow(k + 1);
                    k = -1;
                }
            }
        }

        $("#tab-test").on("click", "li", function () {
            $(this).addClass("am-active").siblings("li").removeClass("am-active");
            var target = $(this).children("a").attr("data-target");
            $(target).addClass("am-active").siblings(".am-tab-panel").removeClass("am-active");
        }).find("li").eq(0).trigger("click");

    </script>

{% endblock %}